<template>
  <div class="" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <br>
    <div class="container-fluid form-inline" style="">
      <div class="card" style="width: 30%">
        <div class="card-body">
          <p>
            <strong>
              上午好！管理员 <br>
              欢迎登陆smartcms-sys
            </strong>
          </p>
        </div>
      </div>

      <br>

      <div class="card ml-4" style="width: 68.5%">
        <div class="card-body">
          <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i><strong>代办事项</strong></p>
          <span class="prepare col-3"><i class="bi bi-clipboard-data"></i> 待接单：<span>6</span></span>
          <span class="prepare col-3"><i class="bi bi-clipboard-check"></i> 待完成：<span>2</span></span>
          <span class="prepare col-3"><i class="bi bi-clock"></i> 待核销：<span>1</span></span>
          <span class="prepare col-2"><i class="bi bi-person"></i> 售后/维权订单：<span>0</span></span>
        </div>
      </div>
    </div>

    <br>

    <RealTimeOverView></RealTimeOverView>

    <br>
    <div class="container-fluid " style="">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 订单概况</p>
          </div>
          <div class="container-fluid">
            <div class="row-fluid form-inline">
              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">
                    <p>
                      堂食有效订单: <br>
                      <span class="h1 order-true"> <strong><span>32</span></strong> </span>
                    </p>
                    <span>营业金额：<span>1280</span></span><br>
                    <p>退款售后订单：<span>1</span></p>
                  </div>
                </div>
              </div>
              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">
                    <p>
                      堂食有效订单: <br>
                      <span class="h1 order-true"> <strong><span>32</span></strong> </span>
                    </p>
                    <span>营业金额：<span>1280</span></span><br>
                    <p>退款售后订单：<span>1</span></p>
                  </div>
                </div>
              </div>
              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">
                    <p>
                      堂食有效订单: <br>
                      <span class="h1 order-true"> <strong><span>32</span></strong> </span>
                    </p>
                    <span>营业金额：<span>1280</span></span><br>
                    <p>退款售后订单：<span>1</span></p>
                  </div>
                </div>
              </div>
              <div class="font-color-order col-3">
                <div class="card order-background">
                  <div class="card-body">
                    <p>
                      待定: <br>
                      <span class="h1 order-true"> <strong><span>32</span></strong> </span>
                    </p>
                    <span>营业金额：<span>1280</span></span><br>
                    <p>退款售后订单：<span>1</span></p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <br>

    <div class="container-fluid " style="">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 营业概况</p>
          </div>
          <div class="form-inline">
            <div class="col-6" id="myChart" style="width: 50%;height: 300px"></div>
            <div class="col-6" id="pay" style="width: 49%;height: 300px"></div>
          </div>
        </div>
      </div>
    </div>

    <br>

    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 商品看板</p>
          </div>
          <table class="table table-striped">
            <thead>
            <tr>
              <th>排名</th>
              <th>商品名称</th>
              <th>商品销量数</th>
              <th>销售额</th>
            </tr>
            </thead>

            <tbody>
            <tr>
              <td>1</td>
              <td>麻婆手撵皮蛋</td>
              <td>999</td>
              <td>111110.00</td>
            </tr>

            <tr>
              <td>1</td>
              <td>麻婆手撵皮蛋</td>
              <td>999</td>
              <td>111110.00</td>
            </tr>

            <tr>
              <td>1</td>
              <td>麻婆手撵皮蛋</td>
              <td>999</td>
              <td>111110.00</td>
            </tr>
            </tbody>

          </table>
        </div>
      </div>
    </div>
    <div class="container-fluid mt-4" align="center">
      ——————————————这里是版权——————————————<br><br>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted(){
      this.drawLine();
      this.pay();
    },
    methods: {
      drawLine(){
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          xAxis: {
            type: 'category',
            data: ['A', 'B', 'C','D','E','F']
          },
          color:["#5470C6"],
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [120, 200, 150,400,100,1000],
              type: 'line'
            }
          ]
        });
      },

      pay(){
        // 基于准备好的dom，初始化echarts实例
        let pay = this.$echarts.init(document.getElementById('pay'))
        // 绘制图表
        pay.setOption({
          legend: {
            orient: 'vertical',
            x: 'left',
            data: ['线上支付', '线下支付']
          },
          color:['#4CA8FF','#5E5CFF'],
          series: [
            {
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center',
                emphasis: {
                  show: true
                }
              },
              labelLine: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              data: [
                { value: 335, name: '线上支付' },
                { value: 310, name: '线下支付' },
              ]
            }
          ]
        });
      }

    }
  }

</script>

<style scoped>

  .prepare{
    display: inline-block;
  }
  .font-color-order{
    color: #999;
  }
  .order-true{
    color: black;
  }
  .order-background{
    background-color: #f4f4f4;
  }
</style>
